<template>
  <div class="levle-1 jy-style-height" @contextmenu.stop="onContextMenu($event)" :id="'Level1outline' + props.info.id">
    <div
      class="Outline-box outlineClassName"
      :data-user-id="props.info.id"
      :data-user-type="4"
      :data-user-url="props.info.audio ? props.info.audio.url : ''"
      :class="'Outline-box' + props.info.type"
    >
      <Outline :info="props.info" :domShow="domShow" />
      <FlotMenu
        v-if="!route.meta.loopType"
        :childId="props.level1Id"
        :indexs="-1"
        :contextmenuExhibitId="-1"
        :materialType="4"
        :AuxiliaryId="props.AuxiliaryId"
      />
    </div>

    <draggableList
      :domShow="props.domShow"
      :childId="props.level1Id"
      :info="props.info"
      :AuxiliaryId="props.AuxiliaryId"
    />
  </div>
</template>  
  
<script setup lang="ts">
import {
  isAnyElementOutOfParent,
  isElementOutOfParent,
  getParentLeftList,
  addParentWidths,
  getParentLeftItem,
} from '@/utils/minxin';
import FlotMenu from '@/components/flotMenu/OutlineMenu.vue';
import { DraggableContainer } from 'vue3-draggable-resizable';
import { getDraggableNumber, getRemConversion } from '@/utils/getRemComputed';
import Level2outline from '../Level2outline/Level2outline.vue';
import draggableList from '../draggableComponents/draggableList.vue';
import { ref, nextTick, watch, computed } from 'vue';
import { useProjectStore } from '@/store';
import { childItemMenuShow } from '@/hooks/menuHooks';
import Outline from './Outline/Index.vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const store = useProjectStore();
const props = defineProps({
  info: {
    type: Object,
  },
  indexs: {
    type: Number,
  },
  level1Id: {
    type: Number,
  },
  AuxiliaryId: {
    type: Number,
  },
  domShow: {
    type: Boolean,
  },
});
const onContextMenu = (e: any) => {
  e.preventDefault();
  if (route.meta.loopType) {
    return;
  }
  store.contextmenuchildId = props.level1Id;
  store.materialType = 4;
  store.contextmenuGroupId = -1;
  childItemMenuShow(e, props.AuxiliaryId);
};
</script>  

<style scoped lang="less">
.levle-1 {
  display: flex;

  padding-right: 80px;
}
.Outline-box {
  position: relative;
}
.Outline-box:hover {
  :deep(.flot-menu) {
    display: flex;
    // top: 198px !important;
    top: 0;
    z-index: 999;
  }
}
.Outline-box14002 {
  margin-right: 200px;
  :deep(.flot-menu) {
    top: 45px !important;
  }
}
.Outline-box14003 {
  margin-right: 200px;
  :deep(.flot-menu) {
    top: 68px !important;
  }
}
.Outline-box14001 {
  margin-right: 200px;
  :deep(.flot-menu) {
    top: 40px !important;
  }
}

.Outline-box24002,
.Outline-box24003,
.Outline-box24004 {
  ::v-deep .flot-menu {
    top: 40px !important;
  }
  :deep(.flot-menu:hover) {
    top: 40px !important;
  }
}
.Outline-box24001 {
  ::v-deep .flot-menu {
    top: 18px !important;
  }
}
.Outline-box34001 {
  ::v-deep .flot-menu {
    top: 38px !important;
  }
}
.Outline-box34002 {
  ::v-deep .flot-menu {
    top: 38px !important;
  }
}
.Outline-box54001 {
  :deep(.flot-menu) {
    top: 0px !important;
    left: 260px;
  }
}
.Outline-box54002 {
  :deep(.flot-menu) {
    top: 60px !important;
    left: 280px;
  }
}
.Outline-box54003 {
  :deep(.flot-menu) {
    top: 10px !important;
    left: 220px;
  }
}
.Outline-box54004 {
  :deep(.flot-menu) {
    top: 36px !important;
    left: 420px;
  }
}
.Outline-box54005 {
  :deep(.flot-menu) {
    top: 0px !important;
    left: 300px;
  }
}
.Outline-box54006 {
  :deep(.flot-menu) {
    top: 5px !important;
    left: 330px;
  }
}
.Outline-box74001 {
  :deep(.flot-menu) {
    top: 60px !important;
    left: 380px;
  }
}
.Outline-box74002 {
  :deep(.flot-menu) {
    top: 60px !important;
    left: 300px;
  }
}
.Outline-box74003 {
  :deep(.flot-menu) {
    top: 60px !important;
    left: 380px;
  }
}
.Outline-box104001 {
  :deep(.flot-menu) {
    top: 22px !important;
    left: 280px;
  }
}
.Outline-box104003 {
  :deep(.flot-menu) {
    top: 0px !important;
    left: 180px;
  }
}
.Outline-box104002 {
  :deep(.flot-menu) {
    top: 14px !important;
    left: 380px;
  }
}

.Outline-box149991 {
  :deep(.flot-menu) {
    top: 30px !important;
  }
}

.Outline-box154001 {
  :deep(.flot-menu) {
    top: 60px !important;
    left: 380px;
  }
}
.Outline-box154002 {
  :deep(.flot-menu) {
    top: 60px !important;
    left: 380px;
  }
}
.Outline-box154003 {
  :deep(.flot-menu) {
    top: 26px !important;
    left: 380px;
  }
}
</style>